<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			div {
				width: 100px;
				height: 100px;
				margin: 20px;
				background-color: red;
				transition: 1s;
			}
		</style>
	</head>
	<body>

		<button class="p1">点击弹框</button>
		<button class="p2">双击弹框</button>
		<div class="p3">
			<p>鼠标事件</p>
		</div>
		<div class="p4">
			<p>鼠标事件</p>
		</div>
		<div class="p5">
			<p>悬停事件</p>
		</div>
		<input type="text" class="p6"  />
		<input type="text" class="p7" />

		<script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
		<script>
			/*
			$(document).ready()
			$(document).ready() 方法允许我们在文档完全加载完后执行函数。该事件方法在 jQuery 语法 章节中已经提到过。
			*/
			$(document).ready(function() {
				//click()事件
				$("button[class='p1']").click(function() {
					alert("我是点击事件");
				})
				//dblclick()双击事件
				$("button[class='p2']").dblclick(function() {
					alert("我是双击事件");
				})
				/*
				mouseenter()
				当鼠标指针穿过元素时，会发生 mouseenter 事件。
				*/
				$("div[class='p3']").mouseenter(function() {
					$("div[class='p3']").css("background-color", "coral");
				})
				/*
				mouseleave()
				当鼠标指针离开元素时，会发生 mouseleave 事件。
				*/
				$("div[class='p3']").mouseleave(function() {
					$("div[class='p3']").css("background-color", "red");
				})
				/*
				mousedown()
				当鼠标指针移动到元素上方，并按下鼠标按键时，会发生 mousedown 事件。
				*/
				$("div[class='p4']").mousedown(function() {
					alert("鼠标在该元素上点击了")
				})
				/*
				mouseup()
				当在元素上松开鼠标按钮时，会发生 mouseup 事件。
				*/
				$("div[class='p4']").mouseup(function() {
					alert("鼠标在该元素上松开了")
				})
				/*
				hover()
				hover()方法用于模拟光标悬停事件。
				当鼠标移动到元素上时，会触发指定的第一个函数(mouseenter);当鼠标移出这个元素时，会触发指定的第二个函数(mouseleave)。
				*/
				$("div[class='p5']").hover(
					function() {
						$("div[class='p5']").css("background-color", "coral");
					},
					function() {
						$("div[class='p5']").css("background-color", "red");
					}
				)
				/*
				focus()
				当元素获得焦点时，发生 focus 事件。
				当通过鼠标点击选中元素或通过 tab 键定位到元素时，该元素就会获得焦点。
				*/
				$("input[class='p6']").focus(function() {
					alert("获取到了焦点")
				})
				/*
				blur()
				当元素失去焦点时，发生 blur 事件。
				*/
				$("input[class='p7']").blur(function() {
					alert("失去了焦点")
				})
			})
		</script>
	</body>
</html>